<template>
    <n-data-table
        remote
        :style="tableStyle"
        :columns="columns"
        :data="data"
        :pagination="pagination"
        :loading="loading"
        :row-key="handleRowKey"
        :scroll-x="scrollx"
        :single-line="false"
        v-model:checked-row-keys="checkedRowKeys"
        @update:page="handlePageChange"
        @update:page-size="handlePageSizeChange"
    />
</template>

<script setup lang="ts">
    import { ref } from "vue"

    const props = defineProps({
        columns: Array,
        data: Array,
        loading: Boolean,
        scrollx: Number,
        getTableData: {
            type: Function,
        },
    })

    const pagination = ref({
        page: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100],
        pageCount: 0,
        itemCount: 0,
        showSizePicker: true,
        prefix: (info: any) => {
            return `共 ${info.itemCount} 项`
        },
    })

    const checkedRowKeys = ref([])

    const tableStyle = {
        "--font-size": "12px",
    }

    function handleRowKey(row: any) {
        return row.id
    }

    function handlePageChange(page: number) {
        pagination.value.page = page

        if (props.getTableData) {
            props.getTableData()
        }
    }

    function handlePageSizeChange(size: number) {
        pagination.value.pageSize = size

        if (props.getTableData) {
            props.getTableData()
        }
    }

    defineExpose({
        pagination,
        checkedRowKeys,
    })
</script>

<style lang="less" scoped>
    .n-data-table {
        margin-top: 10px;
    }
</style>
